<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button class="fr" type="primary" plain @click="reSyncData" :loading="exportLoading">单个单据同步
    </el-button>
    <div class="filter-container">
      <el-select class="filter-item" style="width: 320px;" filterable v-model="query.queryString.doc_type" multiple
        placeholder="单据类型" clearable>
        <el-option v-for="i in docTypes" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-input style="width: 160px;" placeholder="输入单号" clearable prefix-icon="el-icon-search" class="filter-item"
        v-model="query.queryString.order_no"></el-input>
      <el-input style="width: 160px;" placeholder="输入料号" clearable prefix-icon="el-icon-search" class="filter-item"
        v-model="query.queryString.key_part_no"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <span v-if="v.key==='order_date'">
          {{v.row[v.key]|dateText}}
        </span>
        <span v-else>{{v.row[v.key]}}</span>
      </template>
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent="showItem(v.row,v.$index)">查看&nbsp;</a>
        <a href="#" class="text-green" @click.prevent="showItemDetail(v.row,v.$index)">明细数据&nbsp;</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.curPage" :limit.sync="query.pageSize"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
    <el-dialog title="查看明细数据" width="80%" :close-on-click-modal="false" :visible.sync="dialogShowDetail">
      <z-table :list="listDetail" :tableProps="tablePropsDetail" :columns="columnsDetail"></z-table>
    </el-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  data: function () {
    return {
      api: this.$api.erporder,
      name: 'ERP单据',
      columns: [
        { title: '单据类型代码', key: 'doc_type', width: 100 },
        { title: '单据号码', key: 'order_no', width: 140 },
        { title: '单据日期', key: 'order_date', width: 100 },
        { title: '客户代码', key: 'cust_code', width: 100 },
        { title: '客户名称', key: 'cust_name' },
        { title: '供应商代码', key: 'vendor_code', width: 100 },
        { title: '供应商名称', key: 'vendor_name' },
        { title: '已审核', key: 'is_audit', width: 70 },
        { title: '已确认', key: 'is_approved', width: 70 },
        { title: '已作废', key: 'is_enabled', width: 70 },
      ],
      fields: [
        { title: '单据类型代码', key: 'doc_type', span: 8 },
        { title: '单据号码', key: 'order_no', span: 8 },
        { title: '单据日期', key: 'order_date', span: 8 },
        { title: '客户代码', key: 'cust_code', span: 8 },
        { title: '客户名称', key: 'cust_name', span: 16 },
        { title: '供应商代码', key: 'vendor_code', span: 8 },
        { title: '供应商名称', key: 'vendor_name', span: 16 },
        { title: 'ERP ID', key: 'order_id', span: 8 },
        { title: '关联单据1', key: 'relate_order_no1', span: 8 },
        { title: '关联单据1ID', key: 'relate_order_id1', span: 8 },
        { title: 'ERP 状态', key: 'order_status', span: 8 },
        { title: 'ERP 创建人', key: 'doc_create_user', span: 8 },
        { title: 'ERP 创建时间', key: 'doc_create_time', span: 8 },
        { title: '已审核', key: 'is_audit', span: 8 },
        { title: '已确认', key: 'is_approved', span: 8 },
        { title: '已作废', key: 'is_enabled', span: 8 },
        { title: '审核时间', key: 'audit_date', span: 8 },
        { title: '确认时间', key: 'approve_date', span: 8 },
        { title: '作废时间', key: 'cancel_date', span: 8 },
      ],
      query: {
        queryString: { doc_type: [], alldata: 'Y' },
        pageSize: 10,
        curPage: 1,
      },
      tableProps: {
        border: true,
        opsColWith: 120,
        hideOperations: false,
      },
      formProps: {
        disabled: true,
        dialogWidth: '80%',
        labelWidth: '140px',
      },
      docTypes: [
        // { label: '采购', value: 'INV_PO' },
        // { label: '内部采购', value: 'NPO' },
        // { label: '采购退料', value: 'PO_REC' },
        // { label: '内部采购退料', value: 'NSO_TH' },
        // { label: '生产入库', value: 'CPRK' },
        // { label: '销售出库', value: 'SO_REC' },
        // { label: '内部销售', value: 'NSALE' },
        // { label: '销售折让', value: 'SO_ZR' },
      ],
      dialogShowDetail: false,
      listDetail: [],
      columnsDetail: [
        { title: '单据号码', key: 'order_no', width: 130 },
        { title: '明细ID', key: 'erp_detail_id', width: 60 },
        { title: '项次', key: 'item_order', width: 50 },
        { title: '料号', key: 'key_part_no', width: 160 },
        { title: '料名', key: 'key_part_name', width: 120 },
        // { title: '需求日期', key: 'request_date', width: 100 },
        { title: '需求数量', key: 'request_qty', width: 70 },
        { title: '累计处理', key: 'total_finished_qty', width: 70 },
        { title: '实际数量', key: 'actual_qty', width: 70 },
        { title: '退回数量', key: 'return_qty', width: 70 },
        { title: '状态', key: 'status', width: 80 },
        { title: '结案', key: 'closed_status', width: 50 },
        { title: '关联单据1', key: 'relate_order_no1', width: 130 },
        { title: '关联单据2', key: 'relate_order_no2', width: 130 },
        { title: '关联单据3', key: 'relate_order_no3', width: 130 },
      ],
      tablePropsDetail: {
        border: true,
        opsColWith: 120,
        hideOperations: true,
      },
      exportLoading: false,
    }
  },
  methods: {
    formatQuery(query, nopage = false) {
      let tmp = _.cloneDeep(query)
      if (tmp.queryString && tmp.queryString.doc_type) {
        tmp.queryString.doc_type = tmp.queryString.doc_type.join('|')
      } else {
        tmp.queryString.doc_type = ''
      }
      if (nopage) {
        tmp.curPage = 0
        tmp.pageSize = 99999
      }
      return tmp
    },
    getSingelData(order_type, order_no, sync_flag) {
      return this.$request(this.api + 'getsingel', {
        order_type,
        order_no,
        sync_flag,
        check_flag: 'N',
      })
    },
    showItem(v) {
      this.pageLoading = true
      this.getSingelData(v.doc_type, v.order_no, 'N')
        .then((r) => {
          this.pageLoading = false
          this.data = Object.assign({}, v, this.formatAfterGet(r))
          this.editFormVisible = true
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    showItemDetail(v) {
      this.pageLoading = true
      this.getSingelData(v.doc_type, v.order_no, 'N')
        .then((r) => {
          this.pageLoading = false
          this.listDetail = r.detail
          this.dialogShowDetail = true
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    reSyncData() {
      if (
        !this.query.queryString.doc_type ||
        this.query.queryString.doc_type.length == 0 ||
        !this.query.queryString.order_no
      ) {
        this.$message({
          message: '单个单据同步时请输入类型与单号！',
          type: 'error',
        })
        return
      }
      this.exportLoading = true
      this.getSingelData(this.query.queryString.doc_type.join('|'), this.query.queryString.order_no, 'Y')
        .then((r) => {
          this.exportLoading = false
          this.$message({
            message: '同步成功，请查询',
            type: 'success',
          })
        })
        .catch(() => {
          this.exportLoading = false
        })
    },
  },
  created: function () {
    this.getList()
    this.$request(this.$api.dictionary + 'getchildren', { parentType: 'sync_erp_doc_type' }).then((r) => {
      this.docTypes = _.drop(r)
    })
  },
}
</script>
<style scoped>
</style>
